<!DOCTYPE html>

<!--
Copyright 2019 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bottomsheet Behaviour Test</title>

    <script>
      var removeTouchArea = function(event) {
        var touch_area = event.target;
        touch_area.parentNode.removeChild(touch_area);
      }
    </script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }
      nav {
        width: 100%;
        position: fixed;
        height: 2em;
        background-color: lightgreen;
      }
      .top {
        background-color: lightblue;
        height: 5em;
      }
      .bottom {
        background-color: yellow;
        height: 5em;
      }
      .cast {
        height: 100px;
        margin: 20px;
        border: 2px solid black;
        border-radius: 15px;
      }
      .blank {
        height: 100em;
      }
    </style>
  </head>
  <body>
    <nav>Navbar</nav>
    <p class="top">Top text hidden</p>
    <div class="cast"></div>
    <div class="blank">Blank</div>
    <div id="bottom" class="bottom">Bottom
      <div>
        <p id="touch_area" ontouchend="removeTouchArea(event)" onmouseup="removeTouchArea(event)">
          Touchable Area</p>
        <br>
      </div>
    </div>
  </body>
</html>
